<template>
  <div>
    <div class="song-list">
      <van-nav-bar
        title="歌曲信息"
        left-arrow
        @click-left="onClickLeft"
        fixed
      />
      <van-card :title="songInfo.name">
        <template #desc>
          <div class="singer-name" style="margin-top: 10px">
            <van-icon name="user-o" />
            {{ singer.name }}
          </div>
          <p class="p1">
            <span>专辑：{{ singer.title }}</span>
            <span style="margin-left: 130px">语种：{{ lan.value }}</span>
          </p>
          <p class="p2">
            <span>唱片公司：{{ company.value }}</span>
          </p>
          <p>
            <span>发行时间：{{ pub_time.value }}</span>
          </p>
        </template>
      </van-card>
      <div class="button">
        <van-button icon="play-circle-o" type="primary">播放</van-button>
        <van-button icon="like-o" type="default">收藏</van-button>
        <van-button icon="orders-o" type="default">评论</van-button>
        <van-button icon="ellipsis" type="default">更多</van-button>
      </div>
      <!-- 歌词 -->
      <div
        class="songword"
        style="
          margin-top: 40px;
          margin-left: 20px;
          font-size: 12px;
          text-align: center;
        "
      >
        <p style="font-size: 20px">歌词</p>
        <p v-for="(songwords, index) in songword" :key="songwords.id">
          {{ songword[index + 5] }}
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['id'],
  data: () => ({
    songInfo: [],
    company: [],
    lan: [],
    pub_time: [],
    singer: [],
    songword: []
  }),
  methods: {
    // 获取歌单详细信息
    async getSonginfo() {
      const res = await this.$http.getSonginfo(this.id)
      this.songInfo = res.data.data.extras
      this.singer = res.data.data.track_info.singer[0]
      this.company = res.data.data.info.company.content[0]
      this.lan = res.data.data.info.lan.content[0]
      this.pub_time = res.data.data.info.pub_time.content[0]
    },
    // 返回上一页
    onClickLeft() {
      this.$router.go(-1)
    },
    // 获取歌词
    async getSongWords() {
      const res = await this.$http.getSongWords(this.id)
      this.songword = res.data.data.lyric
      this.songword = this.songword.split("\n")
    }
  },
  created() {
    this.getSonginfo()
    this.getSongWords()
  }
}
</script>
<style lang="less" scope>
.song-list {
  van-card {
    width: 100%;
    .van-image__img {
      width: 100px;
      height: 100px;
    }
    .van-card__content {
      margin-left: 20px;
      font-size: 10px;
      padding-top: 5px;
      height: 120px;
    }
    .desc {
      position: absolute;
      top: 150px;
      left: -120px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  }
  .button {
    margin-top: 95px;
    margin-left: 130px;
    .van-button.van-button--primary.van-button--normal {
      width: 80px;
      height: 30px;
      font-size: 10px;
      margin-left: 10px;
      .van-button__content {
        width: 100%;
      }
    }
    .van-button.van-button--default.van-button--normal {
      width: 80px;
      height: 30px;
      font-size: 10px;
      margin-left: 5px;
      .van-button__content {
        width: 100%;
      }
    }
    .van-button.van-button--primary.van-button--normal:first-child {
      margin-left: 0;
    }
  }
}
</style>
